<template>
    <div style="padding-top: 1px">
        <div class="my-music">
            <div class="album-slide">
                <div class="album-img">
                    <img :src="attachImageUrl(avator)">
                </div>
                <ul class="album-info">
                    <li>昵称：{{userName}}</li>
                    <li>性别：{{userSex}}</li>
                    <li>生日：{{birth}}</li>
                    <li>故乡：{{location}}</li>
                </ul>
            </div>
            <div class="album-content">
                <div class="album-title">
                    个性签名：{{introduction}}
                </div>
                <div class="songs-body">
                    <album-content :songList="collectList">
                        <template slot="title">我的收藏</template>
                    </album-content>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mixin} from "@/mixins";
import {mapGetters} from 'vuex';
import {getUserOfId, getCollectOfUserId, songOfSongId} from "@/api";
import AlbumContent from "@/components/AlbumContent";

export default {
    name: "MyMusic",
    mixins: [mixin],
    components:{
        AlbumContent
    },
    data(){
        return{
            avator: '',     //用户头像
            userName: '',   //用户名
            userSex: '',    //性别
            birth: '',      //生日
            location: '',   //故乡
            introduction: '',//签名
            collection: '', //收藏的歌曲列表
            collectList: [],//收藏的歌曲列表（带歌词详情）
        }
    },
    computed:{
        ...mapGetters([
            'listOfSongs',      //当前播放列表
            'userId',           //当前登录用户id
        ])
    },
    mounted(){
      this.getMsg(this.userId);
      this.getCollection(this.userId);
    },
    methods:{
        getMsg(userId){
            getUserOfId(userId)
                .then(res => {
                    this.avator = res.avator;
                    this.userName = res.username;
                    if(res.sex == 1){
                        this.userSex = '男';
                    }else{
                        this.userSex = '女';
                    }
                    this.birth = res.birth.substr(0, 10);
                    this.location = res.location;
                    this.introduction = res.introduction;
                });
        },
        //获取我的收藏列表
        getCollection(userId){
            getCollectOfUserId(userId)
                .then(res => {
                    this.collection = res;
                    //通过歌曲id获取歌曲信息
                    for(let item of this.collection){
                        this.getSongsOfIds(item.songId);
                    }
                }).catch(err => {
                console.log(err);
            });
        },
        //通过歌曲id获取歌曲信息
        getSongsOfIds(id){
            songOfSongId(id)
                .then(res => {
                    this.collectList.push(res);
                }).catch(err => {
                    console.log(err);
                });
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/my-music";
</style>